<template>
  <el-dialog
    title="考生作答情况"
    id="answer"
    width="60%"
    top="5%"
    :visible="answerVisible"
    append-to-body
    @close="answerVisible = false"
  >
    <div class="cont2" v-loading="fullscreenLoading">
      <div class="left">
        <el-button size="large" plain icon="el-icon-refresh" @click="init"
          >{{ refreshTime }}秒后更新信息</el-button
        >
        <p>答题卡</p>
        <div class="dati">
          <div
            v-for="(item, inx) in list"
            :key="inx"
            :class="list[inx].answer ? 'answered' : ''"
            :style="inx === index ? 'border: 1px dashed red' : ''"
            @click="serialNumber(inx)"
          >
            {{ inx + 1 }}
          </div>
        </div>
        <div class="sign">
          <!-- <el-col :span="12">正确 <span class="s1"></span></el-col> -->
          <div>已答 <span class="s2"></span></div>
          <div>未答 <span class="s3"></span></div>
          <!-- <el-col :span="12">标记 <i class="el-icon-star-on"></i></el-col> -->
        </div>
      </div>

      <div class="center">
        <p class="tit">
          <!-- 张帅小丫头 -->
        </p>
        <div
          class="tab-type"
          :style="list[index].answer ? '' : ' background:#fff'"
        >
          <p v-if="list[index].xy_ks_subjectEntity.topictype">
            {{ index + 1 }}、{{
              getDict("topictype", list[index].xy_ks_subjectEntity.topictype)
            }}
          </p>
          <div v-html="list[index].xy_ks_subjectEntity.stem"></div>
          <div class="subject_body">
            <!--单选题  -->
            <div
              v-if="
                list[index].xy_ks_subjectEntity.topictype ===
                  '7280c24ba6bf410997c739637706e7e6'
              "
            >
              <ul>
                <li
                  v-for="(val, inx) in list[index].xy_ks_subjectEntity
                    .optionsum"
                  :key="inx"
                >
                  {{ val.label }}、{{ val.value }}
                </li>
              </ul>
            </div>
            <!--多选题  -->
            <div
              v-if="
                list[index].xy_ks_subjectEntity.topictype ===
                  '1d3f7e7e22c94e49ba95f52e3ec9e3af'
              "
            >
              <ul>
                <li
                  v-for="(val, inx) in list[index].xy_ks_subjectEntity
                    .optionsum"
                  :key="inx"
                >
                  {{ val.label }}、{{ val.value }}
                </li>
              </ul>
            </div>
            <!--填空题  -->
            <div
              v-if="
                list[index].xy_ks_subjectEntity.topictype ===
                  'f0b4073bc9ad4426b87cbc70d4526cf6'
              "
            ></div>
            <!--判断题  -->
            <div
              v-if="
                list[index].xy_ks_subjectEntity.topictype ===
                  'ee505074164e4d0bb54e4a5136b123fb'
              "
            >
              <div style="margin:20px 0">
                <el-radio-group
                  disabled
                  v-model="list[index].xy_ks_subjectEntity.result"
                >
                  <el-radio label="正确"></el-radio>
                  <el-radio label="错误"></el-radio>
                </el-radio-group>
              </div>
            </div>
            <!-- 简单题 -->
            <div
              v-if="
                list[index].xy_ks_subjectEntity.topictype ===
                  '07ba1e3b779b4e1db3c1318d0f80a688'
              "
            ></div>
          </div>
        </div>
        <div class="answer">
          <p>考生答案：{{ list[index].answer }}</p>
          <div
            v-if="
              list[index].xy_ks_subjectEntity.topictype ===
                '07ba1e3b779b4e1db3c1318d0f80a688'
            "
          >
            正确答案：
            <p v-html="list[index].xy_ks_subjectEntity.result"></p>
          </div>

          <div
            v-else-if="
              list[index].xy_ks_subjectEntity.topictype ===
                'f0b4073bc9ad4426b87cbc70d4526cf6'
            "
          >
            <div>
              正确答案：
              <span
                v-for="(val, inx) in list[index].xy_ks_subjectEntity.optionsum"
                :key="inx"
                style="margin-right:10px"
              >
                {{ val.value }};
              </span>
            </div>
          </div>
          <div v-else>
            正确答案： {{ list[index].xy_ks_subjectEntity.result }}
          </div>
          <el-row>
            <el-col :span="4">题目解析:</el-col>
            <el-col :span="20">
              <div
                v-html="list[index].xy_ks_subjectEntity.answeranalysis"
              ></div>
            </el-col>
          </el-row>
        </div>
        <div class="check-answer">
          <el-button type="success" size="large" @click="lastQuestion"
            >上一题</el-button
          >
          <el-button type="success" size="large" @click="nextQuestion"
            >下一题</el-button
          >
        </div>
      </div>

      <div class="right">
        <div class="djs">
          <div class="sy-time"><i class="el-icon-time"></i> 剩余时间</div>
          <h3>{{ remainingTime }}</h3>
        </div>
        <div class="progress">
          <div>当前进度</div>
          <h3>{{ completed }}/{{ list.length }}</h3>
        </div>
        <div class="jdt">
          <el-progress :percentage="20" color="rgb(255,103,0)"></el-progress>
        </div>
        <div class="djs-btn">
          <!-- <el-button type="primary">延长考试时长</el-button> -->
          <!-- <el-button type="success">强制交卷</el-button> -->
        </div>
      </div>
    </div>
  </el-dialog>
</template>
<script>
import request from "@/utils/request";
import dayjs from "dayjs";
export default {
  name: "AnswerSituation",
  props: {
    dataForm: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      answerVisible: false,
      list: [
        {
          xy_ks_subjectEntity: []
        }
      ],
      index: 0,
      stuid: "",
      paperid: "",
      clazzid: "",
      cpid: "",
      fullscreenLoading: false,
      timer: null, // 定时器
      timer2: null, //定时器2
      refreshTime: 30, // 定时刷新
      remainingTime: 0 //剩余考试时间
    };
  },
  watch: {
    answerVisible(val) {
      if (!val) {
        clearInterval(this.timer);
        clearInterval(this.timer2);
      }
    }
  },
  computed: {
    completed() {
      let num = 0;
      this.list.forEach(item => {
        if (item.answer) {
          num++;
        }
      });
      return num;
    }
  },
  methods: {
    init() {
      this.answerVisible = true;
      this.fullscreenLoading = true;
      request({
        url: "/api/stuAnswer/Xy_ks_stu_answer",
        method: "get",
        data: {
          clazzid: this.clazzid,
          cpid: this.cpid,
          stuid: this.stuid,
          paperid: this.paperid,
          organizeId:this.$store.getters.organizeId
        }
      }).then(res => {
        console.log(res, 3333);
        this.fullscreenLoading = false;
        this.list = res.data;
        this.list = this.list.sort((a, b) => a.subsort - b.subsort);
        console.log(this.list, "list");
        this.list.forEach(item => {
          // 判断不等于简答题，不等于判断题
          if (
            item.xy_ks_subjectEntity.topictype !==
              "07ba1e3b779b4e1db3c1318d0f80a688" &&
            item.xy_ks_subjectEntity.topictype !==
              "ee505074164e4d0bb54e4a5136b123fb"
          ) {
            item.xy_ks_subjectEntity.result = JSON.parse(
              item.xy_ks_subjectEntity.result
            );
            item.xy_ks_subjectEntity.optionsum = JSON.parse(
              item.xy_ks_subjectEntity.optionsum
            );
          }
          if (
            item.xy_ks_subjectEntity.topictype ===
            "1d3f7e7e22c94e49ba95f52e3ec9e3af"
          ) {
            //判断多选，把正确答案的数组转join()
            item.xy_ks_subjectEntity.result = item.xy_ks_subjectEntity.result.join();
          }
        });
        this.refreshTime = 30;
        //先清理上一次的定时器
        clearInterval(this.timer);
        this.timer = setInterval(() => {
          if (this.refreshTime > 0) {
            this.refreshTime--;
            this.refreshTime < 10
              ? (this.refreshTime = "0" + this.refreshTime)
              : this.refreshTime;
          } else {
            clearInterval(this.timer);
            this.init();
          }
        }, 1000);

        // 判断是否为固定试卷
        if (
          this.dataForm.questionmethod === "b876a8387d6e4b588573bf74a557ed1b"
        ) {
          //页面进来先执行一次在延迟1s执行
          let second = new Date().getTime(); // 当前时间戳
          // 剩余时间 = 考试结束时间 - 当前时间
          this.remainingTime = this.dataForm.endtime - second;
          if (this.remainingTime > 0) {
            this.remainingTime = this.computingTime(this.remainingTime);
          } else {
            this.remainingTime = "00:00:00";
          }
          //先清理上一次的定时器
          clearInterval(this.timer2);
          this.timer2 = setInterval(() => {
            let second = new Date().getTime(); // 当前时间戳
            // 剩余时间 = 考试结束时间 - 当前时间
            this.remainingTime = this.dataForm.endtime - second;
            if (this.remainingTime > 0) {
              this.remainingTime = this.computingTime(this.remainingTime);
            } else {
              this.remainingTime = "00:00:00";
              clearInterval(this.timer2);
            }
          }, 1000);
        } else {
          //随机考试

          var testtime;
          //页面进来先执行一次在延迟1s执行
          let second = new Date().getTime(); // 当前时间戳
          //计算考试时长 (分钟-> 时间戳)
          testtime = this.dataForm.testtime * 60 * 1000;
          // 计算考试结束时间（ 考试开始时间 + 考试时长）
          let endtime = this.dataForm.teststarttime * 1 + testtime;
          // 判断考试结束时间如果大于设定考试结束时间则选择设定考试结束时间
          endtime > this.dataForm.endtime
            ? (endtime = this.dataForm.endtime)
            : endtime;
          // 剩余时间 = 考试结束- 当前时间
          this.remainingTime = endtime - second;
          if (this.remainingTime > 0) {
            this.remainingTime = this.computingTime(this.remainingTime);
          } else {
            this.remainingTime = "00:00:00";
          }
          //先清理上一次的定时器
          clearInterval(this.timer2);
          this.timer2 = setInterval(() => {
            let second = new Date().getTime(); // 当前时间戳
            //计算考试时长 (分钟-> 时间戳)
            testtime = this.dataForm.testtime * 60 * 1000;
            // 计算考试结束时间（ 考试开始时间 + 考试时长）
            let endtime = this.dataForm.teststarttime * 1 + testtime;
            // 判断考试结束时间如果大于设定考试结束时间则选择设定考试结束时间
            endtime > this.dataForm.endtime
              ? (endtime = this.dataForm.endtime)
              : endtime;
            // 剩余时间 = 考试结束- 当前时间
            this.remainingTime = endtime - second;
            if (this.remainingTime > 0) {
              this.remainingTime = this.computingTime(this.remainingTime);
            } else {
              this.remainingTime = "00:00:00";
            }
          }, 1000);
        }
      });
    },
    //计算时间
    computingTime(time) {
      //把剩余时间毫秒数转化为秒
      var times = time / 1000;
      //计算小时数 转化为整数
      var h = parseInt((times / 60 / 60) % 24);
      //如果小时数小于 10，要变成 0 + 数字的形式
      h < 10 ? (h = "0" + h) : h;
      //计算分钟数 转化为整数
      var m = parseInt((times / 60) % 60);
      //如果分钟数小于 10，要变成 0 + 数字的形式
      m < 10 ? (m = "0" + m) : m;
      //计算描述 转化为整数
      var s = parseInt(times % 60);
      //如果秒钟数小于 10，要变成 0 + 数字的形式
      s < 10 ? (s = "0" + s) : s;
      let timer = h + ":" + m + ":" + s;
      return timer;
    },
    // 上一题
    lastQuestion() {
      if (this.index == 0) {
        this.$message.warning("已经是第一题了");
      } else {
        this.index--;
      }
    },
    // 下一题
    nextQuestion() {
      if (this.index == this.list.length - 1) {
        this.$message.warning("已经是最后一题了");
      } else {
        this.index++;
      }
    },
    // 点击序号
    serialNumber(index) {
      this.index = index;
    }
  }
};
</script>
<style scoped lang="scss">
.cont2 {
  width: 100%;
  height: 600px;
  background: rgb(248, 248, 251);
  display: flex;
  justify-content: space-between;
  .left,
  .center,
  .right {
    background: #fff;
    margin: 0 10px;
    margin-top: 20px;
  }
  .left {
    overflow: hidden;
    padding: 10px 5px 0 5px;
    flex: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 90%;
    p {
      width: 100%;
      text-align: center;
      font-size: 16px;
      line-height: 60px;
    }
    .dati {
      cursor: pointer;
      padding-left: 24px;
      box-sizing: border-box;
      width: 115%;
      min-height: 180px;
      overflow: auto;
      display: flex;
      flex-wrap: wrap;
      border-top: 1px solid rgb(237, 237, 237);
      border-bottom: 1px dashed rgb(237, 237, 237);
      margin-bottom: 30px;
      > div {
        width: 35px;
        text-align: center;
        margin: 10px 12px;
        color: #000;
        line-height: 35px;
        height: 35px;
        border: 1px solid rgb(237, 237, 237);
      }
      .answered {
        background: rgb(200, 200, 200);
        color: #fff;
      }
    }
    .sign {
      display: flex;
      justify-content: space-evenly;
      width: 100%;
      //   padding-left: 40px;
      font-size: 16px;
      line-height: 21px;
      span {
        margin-left: 10px;
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: top;
        margin-bottom: 20px;
        background: red;
      }
      .s1 {
        background: rgb(255, 103, 0);
      }
      .s2 {
        background: rgb(153, 153, 153);
      }
      .s3 {
        border: 1px solid #000;
        background: #fff;
      }
      .el-icon-star-on {
        color: rgb(255, 216, 0);
        margin-left: 10px;
        font-size: 23px;
        margin-top: -7px;
        position: relative;
        top: 2px;
      }
    }
  }
  .center {
    height: 90%;
    flex: 4;
    .subject_body {
      //   margin-top: 10px;
      //   margin-left: 25px;
      //   line-height: 22px;
      ul {
        li {
          list-style: none;
          line-height: 30px;
          >>> .el-radio__label {
            font-size: 16px;
          }
        }
      }
    }
    .tit {
      line-height: 50px;
      font-size: 18px;
      text-indent: 20px;
      font-weight: bold;
      border-bottom: 1px dashed rgb(237, 237, 237);
    }
    p {
      line-height: 25px;
    }
    p:nth-of-type(2) {
      margin-top: 10px;
      text-indent: 25px;
    }
    p:nth-of-type(3) {
      width: 90%;
      margin: 0 auto;
      background: rgb(248, 249, 251);
      text-indent: 16px;
    }
    .tab-type {
      width: 90%;
      margin: 0 auto;
      line-height: 40px;
      margin-top: 10px;
      background: rgb(248, 249, 251);
      text-indent: 20px;
    }
    .answer {
      width: 90%;
      margin: 0 auto;
      margin-top: 10px;
      background: rgb(255, 250, 247);
      padding: 10px 30px;
      > div {
        line-height: 30px;
      }
    }
    .check-answer {
      width: 90%;
      margin: 0 auto;
      display: flex;
      margin-top: 20px;
      padding: 0 75px;
      justify-content: space-between;
    }
  }
  .right {
    flex: 1;
    height: 270px;
    .djs,
    .progress {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      height: 80px;
      color: #fff;
      background: rgb(255, 103, 0);
    }
    .sy-time {
      font-size: 12px;
    }
    .progress {
      height: 70px;
      background: #fff;
      color: #000;
    }
    .jdt {
      border-bottom: 2px solid rgb(234, 234, 234);
      display: flex;
      justify-content: center;
      padding-bottom: 5px;
      ::v-deep .el-progress-bar__outer {
        width: 120px;
      }
      ::v-deep .el-progress__text {
        display: none;
      }
    }
    .djs-btn {
      height: 90px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      > .el-button {
        // height: 25px;
        // line-height: 8px;
        width: 90%;
      }
      > .el-button:last-child {
        margin-left: -1px;
        margin-top: 10px;
      }
    }
  }
}
</style>
